<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    h1 {
      margin-top: 0;
      font-weight: bold;
    }

    .login {
      width: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .login form {
      width: 100%;
      margin-top: 20px;
    }

    .login button {
      width: 100%;
    }

    .login footer {
      width: 100%;
      box-sizing: border-box;
      margin-top: 20px;
      padding: 0 5rem;
      display: flex;
      justify-content: space-evenly;
    }

    .login-input {
      margin-bottom: 30px;
    }

    .login .tip {
      position: absolute;
      bottom: 0;
      transform: translateY(100%);
      color: var(--el-color-danger)
    }

    .login button {
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div id="App">
    <div class="login">
      <h1>Jupyter协作平台</h1>
      <!-- 表单 -->
      <el-form :model="loginForm" :rules="rules" ref="loginForm">
        <!-- 邮箱 -->
        <el-form-item class="login-input" prop="email">
          <el-input type="email" placeholder="请输入邮箱" v-model="loginForm.email" class="w-50 m-2" size="large"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item class="login-input" prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="loginForm.password" class="w-50 m-2" size="large">
          </el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="large" @click="login">登录</el-button>
      <!-- 底部 -->
      <footer>
        <el-link href="#" :underline="false">忘记密码</el-link>
        <el-link href="#" :underline="false">注册</el-link>
      </footer>
    </div>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          loginForm: {
            email: '',
            password: '',
          },
          rules: {
            email: [
              { type: 'email', required: true, message: '请输入正确的邮箱', trigger: 'blur' }
            ],
            password: [
              { max: 20, message: '密码不能超过20位', trigger: 'blur' },
              { required: true, message: '请输入密码', trigger: 'blur' },
              {
                pattern: new RegExp(/^[a-zA-Z0-9!@#$%^~&*)(+=._-]/),
                message: '密码只能含字母、数字或特殊字符',
                trigger: 'blur'
              }
            ]
          }
        }
      },
      methods: {
        async login() {
          const isValid = await this.$refs.loginForm.validate()
            .then(() => true)
            .catch(() => false)

          if (!isValid) return

          const { email, password } = this.loginForm
          const response = await fetch('/user/login', {
            method: 'POST',
            body: JSON.stringify({ username: email, password })
          })
          const res = await response.json()
          console.log(res)
        }
      }
    })

    app.use(ElementPlus)
    app.mount('#App')
  </script>
</body>

</html>